<template>
  <div class="flex flex-col flex-1 w-full">
    <div class="w-full home-title mb20px">会议概况</div>
    <div class="flex-1 flex flex-col">
      <div class="w-full h97.5px flex flex-justify-between">
        <div
          class="w31% h100% flex flex-items-center px22px pt14px rd-6px overflow-hidden cursor-pointer relative"
          :style="`background:url('https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/home-gys-bg.png') no-repeat;background-size: cover;background-position:right`"
        >
          <div class="full w100% text-16px font-bold c-#fff">
            <div class="text-18px">今日会议场数</div>
            <div class="mt16px flex flex-justify-end flex-items-end">
              <span class="text-30px">1</span>
              <span class="text-16px pb4px">场</span>
            </div>
          </div>
        </div>
        <div
          class="w31% h100% flex flex-items-center px22px pt14px rd-6px overflow-hidden cursor-pointer relative"
          :style="`background:url('https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/home-jdcd-bg.png') no-repeat;background-size: cover;background-position:right`"
        >
          <div class="full w100% text-16px font-bold c-#fff">
            <div class="text-18px">本周会议场数</div>
            <div class="mt16px flex flex-justify-end flex-items-end">
              <span class="text-30px">2</span>
              <span class="text-16px pb4px">场</span>
            </div>
          </div>
        </div>
        <div
          class="w31% h100% flex flex-items-center px22px pt14px rd-6px overflow-hidden cursor-pointer relative"
          :style="`background:url('https://qushen-file.oss-cn-beijing.aliyuncs.com/0-qssite-supplier/home/businessData/home-sfry-bg.png') no-repeat;background-size: cover;background-position:right`"
        >
          <div class="full w100% text-16px font-bold c-#fff">
            <div class="text-18px">本月会议场数</div>
            <div class="mt16px flex flex-justify-end flex-items-end">
              <span class="text-30px">3</span>
              <span class="text-16px pb4px">场</span>
            </div>
          </div>
        </div>
      </div>

      <div class="flex-1">
        <vab-chart class="chart-box" :option="option" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const supperlierData = ref<any>({})

onMounted(() => {
  fetchData()
})

const option = ref<any>({
  title: {
    top: 30,
    left: 'center',
    text: '会议热力图',
  },
  tooltip: {},
  visualMap: {
    min: 0,
    max: 10,
    type: 'piecewise',
    orient: 'horizontal',
    left: 'center',
    top: 65,
    color: ['#003884', '#004EB7', '#0064EA', '#1E7EFF', '#519BFF'],
  },
  calendar: {
    top: 120,
    left: 30,
    right: 30,
    cellSize: ['auto', 20],
    range: '2016',
    itemStyle: {
      borderWidth: 0.5,
    },
    yearLabel: { show: false },
  },
  series: {
    type: 'heatmap',
    coordinateSystem: 'calendar',
    data: [],
  },
})

const fetchData = async () => {
  const { result } = { result: { statistics: [] } }
  supperlierData.value = result
  option.value.series[0].data = result?.statistics.map((item: any) => item.suppliers)
  option.value.series[1].data = result?.statistics.map((item: any) => item.sites)
  option.value.series[2].data = result?.statistics.map((item: any) => item.staffs)
  option.value.xAxis[0].data = result?.statistics.map((item: any) => `${item.month.slice(-2)}月`.replace('0', ''))
}

const router = useRouter()
const goPage = (link: string) => {
  link && router.push(link)
}
</script>

<style lang="scss" scoped></style>
